<template>
    <div class="index-img">
      <el-dialog
        title="新建品类"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        top="30vh"
        width="500px"
        :visible.sync="visible"
        @close="closeDialog"
      >
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="dataForm"
          label-position="left"
          label-width="130px"
          style="min-width: 400px; width: 400px; margin-left:35px;"
        >
          <el-form-item label="品类名称" prop="denomName">
            <el-input v-model="dataForm.denomName" placeholder="请输入DAW denomID名称" />
          </el-form-item>
          <el-form-item label="区块链" prop="deployId">
            <el-select v-model="dataForm.deployId" placeholder="请选择" filterable>
              <el-option
                v-for="item in nftDeploys"
                :key="item.id"
                :label="item.chainName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="confirm()">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  // import * as api from '@/api/product/attr'
  export default {
    name: 'Category',
    data() {
      return {
        visible: false,
        dataForm:{
          denomName: '',
          deployId : '',
        },
        nftDeploys:[],
        rules: {
          denomName: [{ required: true, message: '请输入DAW denomID名称', trigger: 'blur' }],
          deployId: [{ required: true, message: '请选择DAW', trigger: 'change' }],
        }
      }
    },
    mounted() {
      console.log(222)
      this.$http({
          url: this.$http.adornUrl(`/admin/nftdeploy/selectList`),
          method: 'get',
      }).then( ({ data }) => {
          this.nftDeploys = data.data
          this.page.total = data.total
          this.dataListLoading = false
      } )
    },
    methods: {
      init() {
        this.visible = true
      },
  
      confirm() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) {
            return
          }
          this.$http({
            url: this.$http.adornUrl(`/admin/nftdenom`),
            method: 'post',
            data: this.$http.adornData({
              denomName: this.dataForm.denomName,
              deployId: this.dataForm.deployId,
            })
          }).then( ({ data }) => {
  
            this.$message({
              type: 'success',
              message: '新建成功',
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
                this.closeDialog();
                this.$router.go(0)
              }
            })
          })
        })
      },
      closeDialog(){
        this.dataForm.denomName = ''
        this.dataForm.deployId = ''
      }
    }
  
  }
  </script>
  